@extends('home.layout.base')
<link rel="stylesheet" href="{{URL::asset('./css/hrmy/address.css')}}">

@section('content')
<div class="mainHrContent" id="hrAssetsconsume">
    <div class="storelistTitle">
        <span class="storelistTitle_left">
            <span>
                <img src="{{URL::asset('./img/icon/home.png')}}">
            </span>
            <span><a href="{{route('home.index.index') }}">首页</a> >
                <a href="{{route('home.suppliermy.supplierIndex') }}">供应商中心</a>
                > 财务信息管理
            </span>
        </span>
        <span class="storelistTitle_right">
            <span>找不到合适的供应商？发个需求试试？</span>
            <button @click="window.location.href ='{{ route('home.demand.demandAdd')}}'">免费发布需求</button>
        </span>
    </div>
    <div class="hrContent">
        @include('home.suppliermy.menu')
        <div class="basicInfo" id="hrAssetsconsumes">
            <div class="basicInfo_title">
                <span></span>
                财务信息管理 > 消费记录
            </div>
            <div class="tableAddr">
                <table>
                    <thead>
                        <tr>
                            <th>消费信息</th>
                            <th>积分</th>
                            <th>消费时间</th>
                            <!-- <th>申诉状态</th> -->
                            <!-- <th>操作</th> -->
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item,index) in listData">
                            <td>@{{item.desc}}</td>
                            <td>@{{item.integral}}分</td>
                            <td>@{{item.created_at}}</td>
                            <!-- <td class="complaintStatus">

                            </td> -->
                            <!-- <td>
                                <a>申诉</a>
                            </td> -->
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="elementPage" style="margin-top: 20px;" v-if="pageCount>0">
                <el-pagination :pager-count="5" @current-change="handleCurrentChange" :current-page.sync="pageNumber" background prev-text="上一页" next-text="下一页" layout="prev, pager, next,jumper" :total="pageCount">
                </el-pagination>
            </div>
        </div>
    </div>
</div>
<style>
    .complaintStatus>span {
        display: flex;
        align-items: center;
        font-size: 12px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        line-height: 20px;
        color: rgba(51, 51, 51, 1);
    }

    .complaintStatus>span>img {
        width: 16px;
        height: 16px;
        margin-right: 4px;
    }

    tbody>tr:not(:last-child) {
        border-bottom: 1px solid rgba(204, 204, 204, 1);
    }

    .tableAddr tbody>tr a {
        display: flex;
        align-items: center;
        padding: 4px 8px;
        font-size: 12px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
        border-radius: 4px;
        background: rgba(209, 0, 24, 1);
    }
</style>
@endsection
@section('compontentScipts')
<script>
    $(() => {
        let hrAssetsconsume = new Vue({
            el: '#hrAssetsconsumes',
            data: () => {
                return {
                    listData: {},
                    pageNumber: 1,
                    pageCount: 0,
                }
            },
            created() {
                this.getList();
            },
            mounted() {},
            methods: {
                getList() {
                    let data = {
                        page: this.pageNumber
                    }
                    apiAjax("{{ route('home.user.userIntegralLogsApi')}}", 'get', data, (res) => {
                        if (res.code == 0) {
                            this.pageCount = res.data.total;
                            this.listData = res.data.data;
                        } else {
                            this.$message({
                                message: res.msg,
                                type: 'warning'
                            });
                        }
                    }, (erro) => {

                    });
                },
                handleCurrentChange(val) {
                    this.pageNumber = val;
                    this.getList();
                }
            }
        })
    })
</script>
@endsection